<template>
    <div>
        <div v-if="editMode" :style="{ width: detail.style.position.w + 'px', height: detail.style.position.h + 'px' }" class="view-panel"></div>
        <iframe :src="childUrl" :style="{ width: detail.style.position.w + 'px', height: detail.style.position.h + 'px' }"></iframe>
    </div>
</template>

<script>
import BaseView from './View';

export default {
    name: 'view-panel',
    extends: BaseView,
    data() {
        return {
            childUrl: '',
        };
    },
    computed: {
        dataInit() {
            return this.detail.dataBind.ztPageData;
        },
    },
    watch: {
        dataInit() {
            if (this.detail.dataBind.ztPageData) {
                let split = this.detail.dataBind.ztPageData.split('&');
                const routeUrl = this.$router.resolve({
                    path: '/fullscreen',
                    query: {
                        guid: split[0],
                        deviceImei: split[1],
                        t: new Date().getTime(),
                    },
                });
                this.childUrl = this.topoUtil.getServerIp() + ':' + this.topoUtil.getServerPort() + routeUrl.href;
            }
        },
    },
    mounted() {
        let ip = this.topoUtil.getServerIp();
        let port = this.topoUtil.getServerPort();
        if (this.detail.dataBind.ztPageData) {
            let split = this.detail.dataBind.ztPageData.split('&');
            const routeUrl = this.$router.resolve({
                path: '/fullscreen',
                query: {
                    guid: split[0],
                    deviceImei: split[1],
                    t: new Date().getTime(),
                },
            });
            // console.log("当前打开窗口");
            this.childUrl = this.topoUtil.getServerIp() + ':' + this.topoUtil.getServerPort() + routeUrl.href;
        }
    },
};
</script>

<style lang="scss" scoped>
.view-panel {
    position: absolute;
    top: 0px;
    left: 0px;
    background: transparent;
}
</style>
